<template>
  <div class="credit">
       <h2>免征信·无利息·无抵押·无担保</h2>
       <p class="tail">只收取一次服务费，每期等额本金还款，最高可分10期</p>
       <ul class="four-list">
         <li class="item">
           <div class="title">
            <img :src="iconList.first" alt="" class="icon">
            <h3>快速高效</h3>
           </div>
           <div class="detail">
            <p>当天申请，当天放款</p>
            <p>让你更省心</p>
           </div>
         </li>
         <li class="item">
           <div class="title">
            <img :src="iconList.second" alt="" class="icon">
            <h3>多种分期</h3>
           </div>
           <div class="detail">
             <p>3期、6期、10期多种 </p>
            <p>分期任你选择</p>
           </div>
         </li>
         <li class="item">
           <div class="title">
            <img :src="iconList.third" alt="" class="icon">
            <h3>真实报价</h3>
           </div>
           <div class="detail">
            <p>车辆保险费金额由  </p>
            <p>相应保险公司核定</p>
            <p>绝不多收费用</p>
           </div>
         </li>
         <li class="item">
           <div class="title">
            <img :src="iconList.fourth" alt="" class="icon">
            <h3>合同网签</h3>
           </div>
           <div class="detail">
             <p>合同支持APP在线网签 </p>
            <p>高效更省心</p>
           </div>
         </li>
       </ul>
     </div>
</template>

<script>
export default {
  name: 'Credit',
  data () {
    return {
      iconList: {
        first: require('@/assets/img/index/zx-icon-1.png'),
        second: require('@/assets/img/index/zx-icon-2.png'),
        third: require('@/assets/img/index/zx-icon-3.png'),
        fourth: require('@/assets/img/index/zx-icon-4.png')
      }
    }
  }

}
</script>

<style scoped lang='scss'>
.credit{
    font-size: 22px;
    color: #3a3a3a;
    h2{
      font-size: 30px;
      color: #3a3a3a;
      text-align: center;
      padding-top: 80px;
    }
    .tail{
      text-align: center;
      padding-top: 10px;
    }
    .four-list{
      margin: 30px 40px;
      display: flex;
      flex-wrap: wrap;
      .item{
        width: 50%;
        height: 130px;
        box-sizing: border-box;
        padding-left: 65px;
        .title{
          display: flex;
          .icon{
            height: 30px;
            margin-right: 10px;
          }
          h3{
            font-size: 26px;
            color: #3a3a3a;
            line-height: 30px;
            font-weight: 700
          }
        }
        .detail{
          padding-top: 10px;
          p{
            line-height: 34px;
          }
        }
      }
    }
  }
</style>
